<!--
 * @Author: licongwei
 * @Date: 2022-03-21 17:06:57
 * @Description: 流线动效
-->
<template>
  <img class="animate-line" src="../img/light2.png" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'animateLine'
})
</script>
<style lang="less" scoped>
@keyframes lights {
  0%,
  100% {
    top: -17px;
    left: 605px;
    transform-origin: left;
  }
  10%,
  90% {
    top: 28px;
    left: 641px;
  }

  40%,
  60% {
    top: 28px;
    left: 1080px;
    transform-origin: right;
  }
  50% {
    top: -17px;
    left: 1120px;
    transform-origin: right;
  }
}
.animate-line {
  position: absolute;
  top: 28px;
  left: 641px;
  width: 200px;
  height: 170px;

  animation: lights 4s cubic-bezier(0, 0, 0.56, 0.38) infinite;
}
</style>
